<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>处理用户输入</title>
</head>
<body>
    <div id="app-5">
        <p>{{message}}</p>
        <!--v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法 它用于监听 DOM 事件：-->
        <button v-on:click="reverseMessage()">
            逆转信息
        </button>
    </div>
    <div id="app-6">
        <p>{{message}}</p>
        <!--v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。-->
        <input v-model="message">
    </div>

    <div id="app-1">
        <ul>
            <li v-for="value in object">
                {{ value }}
            </li>
        </ul>
    </div>

    <div id="app-2">
        <ul>
            <li v-for="(value, key) in object">
                {{ key }} : {{ value }}
            </li>
        </ul>
    </div>

    <div id="app-3">
        <ul>
            <li v-for="(value, key, index) in object">
                {{ index }}. {{ key }} : {{ value }}
            </li>
        </ul>
    </div>
    <!--v-for 迭代整数-->
    <div id="app">
        <ul>
            <li v-for="n in 10">
                {{ n }}
            </li>
        </ul>
    </div>

    <script type="text/javascript" src="../vue.js"></script>
    <script type="text/javascript">
        var app5 = new Vue({
            el:"#app-5",
            data:{
                message:"hello world"
            },
            methods:{
                reverseMessage:function () {
                    //split把一个字符串分割成字符串数组
                    //join() 方法用于把数组中的所有元素放入一个字符串
                    //reverse() 方法用于颠倒数组中元素的顺序。
                    this.message = this.message.split('').reverse().join('')
                }
            }
        })
        var app6 = new Vue({
            el:"#app-6",
            data:{
                message:"hello AAA"
            }
        });

        //v-for 迭代对象
        // v-for 可以通过一个对象的属性来迭代数据：
        var app1 = new Vue({
            el: '#app-1',
            data: {
                object: {
                    name: '菜鸟教程',
                    url: 'http://www.runoob.com',
                    slogan: '学的不仅是技术，更是梦想！'
                }
            }
        })
        //可以提供第二个的参数为键名：
        var app2 = new Vue({
            el: '#app-2',
            data: {
                object: {
                    name: '菜鸟教程',
                    url: 'http://www.runoob.com',
                    slogan: '学的不仅是技术，更是梦想！'
                }
            }
        });

        var app3 = new Vue({
            el: '#app-3',
            data: {
                object: {
                    name: '菜鸟教程',
                    url: 'http://www.runoob.com',
                    slogan: '学的不仅是技术，更是梦想！'
                }
            }
        })


    </script>
</body>
</html>